<template>
    <div class="app-container">
        <div class="warp_padding">       
            <div class="head-container">
                <!-- 搜索 -->
                <label  id="labelQuery" class="labelQuery">{{rName}}标题: </label>
                <el-input v-model="formDate.resName" clearable :placeholder="rName+'标题搜索'" style="width: 140px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/>

                <span v-if="device!=='mobile'">
                    <label class="labelQuery">{{rName}}类型: </label>
                    <el-select v-model="formDate.useType" clearable :placeholder="rName+'类型'" @change="toQuery()" style="width:140px">
                        <el-option
                              v-for="item in condition"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                        </el-option>
                    </el-select>

                    <label class="labelQuery">隐私: </label>
                    <el-select v-model="formDate.resStatus" clearable placeholder="请选择" @change="toQuery()" style="width:100px">
                        <el-option
                              v-for="item in resStatu"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                        </el-option>
                    </el-select>

                    <label class="labelQuery">上传时间: </label>
                    <!-- <el-input v-model="formDate.createtime" clearable placeholder="上传时间搜索" style="width: 140px;" class="filter-item" @keyup.enter.native="toQuery" @change="toQuery()"/> -->
                    <el-date-picker
                      v-model="formDate.createtime"
                      type="date"
                      placeholder="选择日期" value-format="yyyy-MM-dd" style="width: 150px;" @change="toQuery()"> 
                    </el-date-picker>

                </span>

                <el-button class="filter-item" size="mini" type="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
                <!-- 新增 -->
                <div style="display: inline-block;margin: 0px 2px;">
                  <el-button
                    class="filter-item"
                    size="mini"
                    type="primary"
                    icon="el-icon-upload"
                    @click="add">上传</el-button>
                  <eForm ref="form" :is-add="isAdd"  :condition="condition" :rName="rName"/>
                </div>
            </div>

            <el-tabs v-model="activeName"  @tab-click="handleClick">
                <el-tab-pane label="视频" name="first" >
                    
                </el-tab-pane>
                <el-tab-pane label="文件" name="second">
                    
                </el-tab-pane>
            </el-tabs>
        </div>
        <video-list v-if="this.formDate.resType==0"  :list="lists"  :pageCount="pageCount" :pagerCount="pagerCount" :total="total"/>
         <file-list v-if="this.formDate.resType==1"  :list="lists"  :pageCount="pageCount" :pagerCount="pagerCount" :total="total"/>
    </div>
</template>

<script>
import checkPermission from '@/utils/permission' 
import { parseTime } from '@/utils/index'
import eForm from './module/form'
import videoList from './module/videolist'
import fileList from './module/filelist'
import { resourcesList } from '@/api/request'
import { editTea } from '@/api/data'
import { mapGetters } from 'vuex'
export default {
    components: { eForm,videoList,fileList },
    computed: {
        ...mapGetters([
          'device'
        ])
    },
    data() {
        return {
            rName:'视频',
            activeName: 'first',
            pageCount: 0,
            total:0,  
            listLoading: false,
            lists: [],             
            pagerCount:11,   
            formDate:{
                pageNo: 1,  
                pageSize:10,
                resType:'0',  //0视频，1文件
                resName:'',
                useType:'',   //0优课1微课2教育资源3其他视频4文档5图片6其他文件
                resStatus:'',
                createtime:'',
                // resFromType:0               
            },
            isAdd:true,
            condition:[
                {
                    id: 0,
                    name: '优课'
                },
                {
                    id: 1,
                    name: '微课'
                },
                {
                    id: 2,
                    name: '教育资源'
                },
                {
                    id: 3,
                    name: '其他'
                },
            ],
            resStatu:[
                {
                    id:'0',
                    name:'公开',
                },
                {
                    id:'1',
                    name:'私有',
                }
            ]
        }
    },
    mounted:function(){
        this.init()
    },
    methods: {
        parseTime,
        checkPermission,
        handleClick(tab, event) {
            if (tab.index ==1) {
                this.rName = "文件"
                this.condition =[{
                    id: 4,
                    name: '文档'
                },
                {
                    id: 5,
                    name: '图片'
                },
                {
                    id: 6,
                    name: '其他'
                }]
            }else{
                this.rName = "视频"
                this.condition =[{
                    id: 0,
                    name: '优课'
                },
                {
                    id: 1,
                    name: '微课'
                },
                {
                    id: 2,
                    name: '教育资源'
                },
                {
                    id: 3,
                    name: '其他'
                }]
            }
            this.formDate.resType = tab.index
            this.init()
        },
        showMsg(tir){
            this.formDate.areaCode = tir;
            this.init()
        },
        
        toQuery(){
            this.init()
        },
        add(){
            this.$refs.form.isEdit = false
            this.$refs.form.ready()
            this.isAdd = true
            this.$refs.form.form = { 
                id:'',
                resType:this.formDate.resType,
                resCover:'',      //封面
                resUrl:'',        //地址
                resName:'',      //视频标题
                useType:'',      //视频类型
                remark:'',       //简介
                resPhases:'',    //学段
                resGrade:'',     //年级
                resCourses:'',   //科目
                resStatus:''      //隐私
            },
            this.$refs.form.dialog = true
            this.$refs.form.show = true
        },
        init(){
            this.listLoading = true
            let params = {...this.formDate}
            resourcesList(params).then(res => { 
                let { list, total } = res
                this.lists = list
                this.total = total
                this.listLoading = false 
            })
        },
       
    },
}

</script>


<style scoped lang="scss">

</style>
